<template>
	<view class="promise-page">
		<view class="banner">
			<text class="banner-title">单身承诺</text>
			<text class="banner-subtitle">认证多一点，缘分近一点</text>
		</view>
		
		<!-- 承诺内容 -->
		<view class="promise-content">
			<view class="promise-text">
				<text>本人使用网名🍎 {{ userInfo.nickname }}，编号：{{ userInfo.id }}，在热恋合吧登记征婚交友信息，承诺所登记资料属实，承诺当前婚姻状态为未婚，本人自行承担信息不属实造成的一切后果，与平台无关。</text>
			</view>
			
			<!-- 实名认证提示 -->
			<view class="verify-notice" v-if="!isVerified">
				<image class="notice-icon" src="/static/icons/notice.png" mode="aspectFit"></image>
				<text class="notice-text">您必须先进行实名认证才能进行签署哦</text>
			</view>
			
			<!-- 签名区域 -->
			<view class="signature-area" v-if="isVerified && !isSigned">
				<view class="signature-box" @touchstart="startSignature" @touchmove="moveSignature" @touchend="endSignature">
					<canvas canvas-id="signatureCanvas" class="signature-canvas"></canvas>
					<text class="signature-hint" v-if="!hasSignature">请在此处签名</text>
				</view>
				<view class="signature-actions">
					<view class="clear-btn" @click="clearSignature">
						<text>清空重签</text>
					</view>
				</view>
			</view>
			
			<!-- 已签署状态 -->
			<view class="signed-status" v-if="isSigned">
				<image class="signed-icon" src="/static/icons/success.png" mode="aspectFit"></image>
				<text class="signed-text">您已完成单身承诺签署</text>
			</view>
		</view>
		
		<!-- 提交按钮 -->
		<view class="submit-btn" @click="submitPromise" v-if="isVerified && !isSigned" :class="{ 'disabled': !hasSignature }">
			<text>确认签署</text>
		</view>
		
		<!-- 实名认证按钮 -->
		<view class="submit-btn" @click="goToVerify" v-if="!isVerified">
			<text>立即实名认证</text>
		</view>
	</view>
</template>

<script>
	import { getPromiseStatusApi, submitPromiseApi } from '@/api/index.js';
	import { mapState } from 'vuex';
	
	export default {
		data() {
			return {
				isVerified: false, // 是否已实名认证
				isSigned: false, // 是否已签署
				hasSignature: false, // 是否已签名
				signaturePoints: [], // 签名点
				context: null // 画布上下文
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		onLoad() {
			this.getPromiseStatus();
			// 创建画布上下文
			this.context = uni.createCanvasContext('signatureCanvas', this);
			this.context.strokeStyle = '#333333';
			this.context.lineWidth = 4;
			this.context.lineCap = 'round';
		},
		methods: {
			// 获取单身承诺状态
			getPromiseStatus() {
				if (!this.userInfo || !this.userInfo.id) {
					this.$hr.methods.toast('请先登录');
					setTimeout(() => {
						this.$hr.methods.goPage('/login/index');
					}, 1500);
					return;
				}
				
				this.$hr.methods.loading();
				getPromiseStatusApi().then(res => {
					this.$hr.methods.hideloading();
					if (res) {
						this.isVerified = res.is_verified || false;
						this.isSigned = res.is_signed || false;
					}
				}).catch(() => {
					this.$hr.methods.hideloading();
					this.$hr.methods.toast('获取单身承诺状态失败');
				});
			},
			
			// 开始签名
			startSignature(e) {
				if (!this.isVerified || this.isSigned) return;
				
				const touches = e.touches[0];
				const point = {
					x: touches.x,
					y: touches.y
				};
				
				this.signaturePoints.push([point]);
				this.hasSignature = true;
			},
			
			// 移动签名
			moveSignature(e) {
				if (!this.isVerified || this.isSigned || !this.hasSignature) return;
				
				const touches = e.touches[0];
				const point = {
					x: touches.x,
					y: touches.y
				};
				
				const currentStroke = this.signaturePoints[this.signaturePoints.length - 1];
				currentStroke.push(point);
				
				this.drawSignature();
			},
			
			// 结束签名
			endSignature() {
				if (!this.isVerified || this.isSigned || !this.hasSignature) return;
				
				this.drawSignature();
			},
			
			// 绘制签名
			drawSignature() {
				this.context.clearRect(0, 0, 600, 200);
				
				for (let stroke of this.signaturePoints) {
					if (stroke.length < 2) continue;
					
					this.context.beginPath();
					this.context.moveTo(stroke[0].x, stroke[0].y);
					
					for (let i = 1; i < stroke.length; i++) {
						this.context.lineTo(stroke[i].x, stroke[i].y);
					}
					
					this.context.stroke();
				}
				
				this.context.draw(false);
			},
			
			// 清空签名
			clearSignature() {
				this.context.clearRect(0, 0, 600, 200);
				this.context.draw(true);
				this.signaturePoints = [];
				this.hasSignature = false;
			},
			
			// 提交单身承诺
			submitPromise() {
				if (!this.isVerified) {
					this.$hr.methods.toast('请先进行实名认证');
					return;
				}
				
				if (!this.hasSignature) {
					this.$hr.methods.toast('请先完成签名');
					return;
				}
				
				// 获取签名图片
				uni.canvasToTempFilePath({
					canvasId: 'signatureCanvas',
					success: (res) => {
						const tempFilePath = res.tempFilePath;
						
						// 上传签名
						this.$hr.methods.loading('提交中...');
						uni.uploadFile({
							url: this.$hr.config.SERVER_URL + '/api/users/v1/promise',
							filePath: tempFilePath,
							name: 'signature',
							header: {
								'Authorization': 'Bearer ' + uni.getStorageSync('token')
							},
							success: (uploadRes) => {
								this.$hr.methods.hideloading();
								const data = JSON.parse(uploadRes.data);
								if (data.code === 200) {
									this.$hr.methods.toast('签署成功', 'success');
									this.isSigned = true;
								} else {
									this.$hr.methods.toast(data.message || '签署失败');
								}
							},
							fail: () => {
								this.$hr.methods.hideloading();
								this.$hr.methods.toast('签署失败');
							}
						});
					},
					fail: () => {
						this.$hr.methods.toast('获取签名失败');
					}
				}, this);
			},
			
			// 前往实名认证
			goToVerify() {
				this.$hr.methods.goPage('/mine/verify/id/index');
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style> 